<template>
    <div>
        <h2>房型信息录入</h2>
        <table class="table table-bordered" border="1">
            <tr>
                <td align="right">房型名称:<span style="color: red;">*</span></td>
                <td>
                    <input type="text" v-model="info.typeName">
                </td>
            </tr>
            <tr>
                <td align="right">价格:<span style="color: red;">*</span></td>
                <td>
                    <input type="text" v-model="info.price">¥
                </td>
            </tr>
            <tr>

                <td align="right">房型面积:<span style="color: red;">*</span></td>
                <td>
                    <input type="text" v-model="info.roomSize">㎡
                </td>
            </tr>
            <tr>
                <td align="right">可住人数:<span style="color: red;">*</span></td>
                <td>
                    <input type="number" v-model="info.peopleNum">
                </td>
            </tr>
            <tr>
                <td align="right">是否加床:</td>
                <td>
                    <input type="radio" :value="0" v-model="info.isBed">免费加床
                    <input type="radio" :value="1" v-model="info.isBed">不加床
                </td>
            </tr>
            <tr>
                <td align="right">房型预览图:<span style="color: red;">*</span></td>
                <td>
                    <input type="file" @change="img">
                    <img :src="info.photo" alt="" width="60px" height="60px">
                </td>
            </tr>
            <tr>
                <td align="right">简介:<span style="color: red;">*</span></td>
                <td>
                    <textarea name="" id="" v-model="info.desc"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="录入房型信息" class="btn btn-success" @click="add">
                </td>
            </tr>
        </table>

    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
let route = useRoute();
let router = useRouter();

///////////////////////////////////////////////////////////////////////////////////////
let info = reactive({
    "typeName": "",
    "price": '',
    "roomSize": '',
    "peopleNum": '',
    "isBed": 0,
    "photo": "",
    "desc": ""
});



/////////////////////////////////函数/////////////////////////////////////////////////////

//图片上传
const img = (e: any) => {
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);
    axios({
        url: 'https://localhost:7080/api/Img/Img',
        data: f,
        method: 'post'
    })
        .then(res => {
            info.photo = res.data;
        })
        .catch(err => {

        })
}

const add = () => {
    if (info.typeName == '') {
        alert('房型名称不能为空');
        return;
    }
    if (info.price == '') {
        alert('房型价格不能为空');
        return;
    }
    if (info.roomSize == '') {
        alert('房型面积不能为空');
        return;
    }
    if (info.peopleNum == '') {
        alert('入住人数不能为空');
        return;
    }
    if (info.photo == '') {
        alert('房型预览图不能为空');
        return;
    }
    if (info.desc == '') {
        alert('房型介绍不能为空');
        return;
    }
    axios({
        url: 'https://localhost:7080/api/RoomType/AddRoomType',
        data: info,
        method: 'post'
    })
        .then(res => {
            if (res.data > 0) {
                alert('录入房型成功');
                router.push('/getRoomType')
            } else {
                alert('房型名称重复');
            }
        })
}


</script>

<style scoped></style>